<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>登录 - 我的歪麦呢</title>
		<link rel="stylesheet" href="css/login.css">
		<script src="js/jquery-3.7.1.js"></script>
	</head>
	<body>
		<!-- 顶部logo -->
		<div class="header">
			<div class="logo">我的歪麦呢</div>
			<div class="slogan">足不出户 享美味佳肴</div>
		</div>

		<!-- 登录表单 -->
		<div class="login-container">
			<div class="login-tabs">
				<div class="tab active" onclick="switchTab('password')">密码登录</div>
				<div class="tab" onclick="switchTab('code')">验证码登录</div>
			</div>

			<!-- 密码登录表单 -->
			<div id="password-form">
				<div class="input-group">
					<label class="input-label">手机号码</label>
					<input type="tel" class="input-field" id="phone" placeholder="请输入手机号码">
				</div>
				<div class="input-group">
					<label class="input-label">密码</label>
					<input type="password" class="input-field" id="password" placeholder="请输入密码">
				</div>
				<button class="login-btn" onclick="login()">登录</button>
				<div class="other-options">
					<a href="#" class="option-link">忘记密码</a>
					<a href="register.html" class="option-link">注册账号</a>
				</div>
			</div>

			<!-- 验证码登录表单 (默认隐藏) -->
			<div id="code-form" style="display: none;">
				<div class="input-group">
					<label class="input-label">手机号码</label>
					<input type="tel" class="input-field" placeholder="请输入手机号码">
				</div>
				<div class="input-group">
					<label class="input-label">验证码</label>
					<input type="text" class="input-field" placeholder="请输入验证码">
					<button class="code-btn" onclick="sendCode()">获取验证码</button>
				</div>
				<button class="login-btn" onclick="login()">登录</button>
			</div>
		</div>

		<!-- 第三方登录 -->
		<div class="third-party">
			<div class="third-title">其他登录方式</div>
			<div class="third-icons">
				<div class="third-icon" onclick="wechatLogin()">微</div>
				<div class="third-icon" onclick="qqLogin()">Q</div>
				<div class="third-icon" onclick="alipayLogin()">支</div>
			</div>
		</div>

		<!-- 页脚 -->
		<div class="footer">
			登录即表示您同意《用户协议》和《隐私政策》
		</div>
	</body>
</html>
<script>
	// 切换登录方式
	function switchTab(type) {
		document.querySelectorAll('.tab').forEach(tab => {
			tab.classList.remove('active');
		});
		event.target.classList.add('active');

		if (type === 'password') {
			document.getElementById('password-form').style.display = 'block';
			document.getElementById('code-form').style.display = 'none';
		} else {
			document.getElementById('password-form').style.display = 'none';
			document.getElementById('code-form').style.display = 'block';
		}
	}

	//登录功能
	function login() {
		let phone = $("#phone").val()
		let password = $("#password").val()
		if (phone == "" || password == "") {
			alert("请输入手机号码或密码！")
			return
		}
		$.ajax({
			url: "http://localhost:8080/login",
			type: "POST",
			contentType: "application/json",
			data: JSON.stringify({
				phone: phone,
				password: password
			}),
			success: function(response) {
				if(response.code === 1){
					sessionStorage.setItem('token', response.data);
					alert("登录成功");
					window.location.href = "home.html";
				}else{
					alert("用户名密码有误，请重新输入！")
				}
			}
		})
	}
</script>
